<template>
  <div>
    <!--    <div class="hf ">-->
    <!--      <div class="hf_content container">-->
    <!--        <span class="iconfont icon-dianhua"></span>服务热线：0551-64298001-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="header_pc visible-md visible-lg container">
      <div class="row">
        <div class="col-lg-3 visible-lg-inline-block">
          <img v-for="(item,index) in systemLogo" :key="index" :src="item.url" class="loger" alt="合肥安玛尔市场信息咨询有限公司logo">
        </div>
        <div class="col-lg-9 col-md-12 position-static">
          <nav class="pc_nav">
            <ul class="nav navbar-nav" v-for="(item,index) in navList" :key="index">
              <!--  @click.native="saveNav(item.path,item.id)"-->
              <li
                :class="[item.path === activePath ? 'active' : '',item.child === item.child ? 'nav-a-li position-static' : '']">
                <router-link @click.native="saveNav(item)" :to='item.path'>{{ item.title }}</router-link>
                <div class="menu-erji" v-if="item.child">
                  <div class="container">
                    <ul class="fwxm">
                      <li v-for="nav in item.child" :class="[nav.path === activePath ? 'active' : '']" :key="nav.id">
                        <router-link @click.native="saveNav(nav)" :to='nav.path'>
                          <span :class="'iconfont ' + nav.icon"></span>
                          <h4>{{ nav.title }}</h4>
                        </router-link>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <!-- 手机版导航栏 -->
    <div class="header_wap container visible-xs visible-sm">
      <nav class="navbar navbar-default " role="navigation">
        <div class="container-fluid">
          <div class="navbar-header visible-xs">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">合肥安玛尔信息咨询有限公司</a>
          </div>
          <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav" v-for="(item,index) in navList" :key="index">
              <li :class="[item.path === activePath ? 'active' : '']">
                <router-link :class="[item.child !== null ? 'dropdown-toggle' : '']"
                             :data-toggle="[item.child !== null ? 'dropdown' : '']" :to='item.path'>{{ item.title }} <b
                  class="caret" v-if="item.child"></b></router-link>
                <ul class="dropdown-menu" v-if="item.child">
                  <li v-for="nav in item.child" :key="nav.id">
                    <router-link :to='nav.path'>
                      {{ nav.title }}
                    </router-link>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>

</template>
<script>
import {mapMutations} from 'vuex'

export default {
  name: 'index',
  data () {
    return {
      navList: [],
      activePath: '',
      systemLogo: [],
      queryInfo: {
        name: '',
        type: 'child'
      },
    }
  },
  created () {
    this.getNavList()
    this.activePath = window.sessionStorage.getItem('activePath')
    this.getCarouselList()
  },
  mounted () {
    this.utils.systemConfig(1).then(res => {
      if (res.data.code !== 200) return false
      this.systemLogo = res.data.data.content.img
    })
  },
  methods: {
    ...mapMutations(['setNavData']),

    async getNavList () {
      const {data: res} = await this.$http.get('home/nav_list', {params: this.queryInfo})
      if (res.code !== 200) return false
      this.navList = res.data.list
    },
    saveNav (item) {
      this.setNavData(item.id)
      // this.activePath = activePath
    },
    async getCarouselList () {
      let router = ''
      if (this.$route.name !== 'undefined') {
        router = this.$route.meta.url
      } else {
        router = this.$route.path
      }
      const params = {router: router}
      const {data: res} = await this.$http.post('home/show_banner_list', params)
      if (res.code !== 200) return false
      document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.list.keyword)
      document.querySelector('meta[name="description"]').setAttribute('content', res.data.list.desc)
      this.$emit('callbackComponent', {
        function: 'getBannerList',
        data: res.data.list
      })
    },
  },
  watch: {
    '$route': 'getCarouselList'
  },
}
</script>

<style scoped lang="scss">
.nav-a-li {
  display: inline-block;
}

.nav-a-li:hover .menu-erji {
  display: block;
}

.menu-erji {
  display: none;
}

.red {
  color: #c4181f !important;
  background-color: #EEEEEE !important;
  border-bottom: 3px solid red !important;
}
</style>
